<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<link rel="stylesheet" href="${ctx}/page/member/css/collection.css" />
<div class="panel panel-default">
	<div class="panel-heading">
		<ul class="nav nav-pills nav-justified" role="tablist">
			<li role="presentation" class="<c:if test="${tab eq 'topic'}">active</c:if>"><a href="${ctx}/memberCenter/collection?tab=topic">收藏的话题</a></li>
			<li role="presentation" class="<c:if test="${tab eq 'product'}">active</c:if>"><a href="${ctx}/memberCenter/collection?tab=product">收藏的商品</a></li>
		</ul>
	</div>
	<div class="panel-body">
		<c:if test="${tab eq 'topic'}">
			<c:forEach items="${collectionPage.getList()}" var="collection">
				<div class="media">
					<div class="media-left">
						<img onerror="this.src='${ctx}/static/imgs/avatar.jpg'" src="${collection.topic.member.avatar}" class="avatar">
					</div>
					<div class="media-body">
						<a style="color: #333" class="title" href="${ctx}/topic/${collection.topic.id}">
							<h5 class="media-heading">${collection.topic.title}</h5>
						</a>
						<p class="topicInfo">
							<span class="hidden-sm hidden-xs">${collection.topic.member.name}</span> 
							<span class="hidden-sm hidden-xs">•</span> 
							<span class="hidden-sm hidden-xs">${collection.topic.replyCounts}个回复</span>
							<span class="hidden-sm hidden-xs">•</span> 
							<span class="hidden-sm hidden-xs">${collection.topic.viewCounts}次浏览</span> 
							<span class="hidden-sm hidden-xs">•</span>
							<span class="hidden-sm hidden-xs">${collection.formatDate(collection.topic.createTime)}</span>
						</p>
					</div>
				</div>
			</c:forEach>
		</c:if>
		
		<c:if test="${tab eq 'product'}">
			<c:forEach items="${collectionPage.getList()}" var="collection">
				<div class="media">
						<div class="media-left media-middle">
							<a href="${ctx}/product/${collection.product.id}"> 
								<img src="${collection.product.smallImage}" class="avatar">
							</a>
						</div>
						<div class="media-body media-middle">
							<a style="color: #333" class="title" href="${ctx}/product/${collection.product.id}">
								<h5 class="media-heading">${collection.product.name}</h5>
							</a>
						</div>
				</div>
			</c:forEach>
		</c:if>
	</div>
</div>